<template>
  <div class="statistics-details">
    <i-table border :columns="columns" :data="details"></i-table>
  </div>
</template>

<script>
import common from "@/common";

export default {
  name: "statistics-details",
  props: {
    start: {
      type: String
    },
    end: {
      type: String
    },
    week: {
      type: Number
    },
    classNum: {
      type: Number
    }
  },
  data: function() {
    return {
      details: []
    };
  },
  mounted() {
    this.search();
  },
  computed: {
    columns() {
      const columns = [
        {
          type: "index",
          width: 60
        },
        {
          title: "学号",
          width: 120,
          render: (h, params) => {
            return h("span", params.row.studentInfo.code);
          }
        },
        {
          title: "姓名",
          width: 100,
          render: (h, params) => {
            return h("span", params.row.studentInfo.name);
          }
        },
        {
          title: "合计",
          width: 80,
          render: (h, params) => {
            let count = 0;
            params.row.attendanceDetailList.forEach(item => {
              if (item) {
                // 排除null元素
                count++;
              }
            });
            return h("span", count);
          }
        }
      ];

      // 计算活动日期字段
      const dateColumns = common.pickWeekInRange(
        new Date(this.start),
        new Date(this.end),
        this.week
      );

      dateColumns.forEach(item => {
        columns.push({
          title: common.formatTitle(item),
          align: "center",
          width: 80,
          render: (h, params) => {
            let count = 0;
            params.row.attendanceDetailList.forEach(courseDate => {
              if (courseDate && common.isSameDay(new Date(courseDate), item)) {
                count = 1;
              }
            });
            return count > 0
              ? h("Button", {
                  props: {
                    type: "primary",
                    icon: "checkmark",
                    size: "small",
                    shape: "circle"
                  }
                })
              : h("span", "");
          }
        });
      });

      // 追加空字段
      columns.push({
        title: " ",
        render: h => {
          return h("span", "");
        }
      });

      return columns;
    }
  },
  methods: {
    search() {
      this.axios
        .get("/statistics/attendance-detail", {
          params: {
            start: this.start,
            end: this.end,
            week: this.week,
            num: this.classNum
          }
        })
        .then(response => {
          if (response.code === 0) {
            this.details = response.data;
          } else {
            this.$Message.error("取得课时详细信息失败。" + response.message);
          }
        });
    }
  }
};
</script>
